<template>
  <div class="app-container">
    <!--搜索面板-->
    <div class="filter-container">
      <el-form :model="searchForm" status-icon ref="searchForm" label-width="90px">
        <el-row :gutter="10">
          <el-col :sm='6'>
            <el-form-item label="学校/楼栋" prop="areaPath">
              <el-cascader
                  @keyup.enter.native="handleFilter"
                  placeholder="请选择学校/楼栋"
                  clearable
                  v-model="searchForm.areaPath"
                  :key="searchForm.areaPath"
                  :options="schoolList"
                  :props="{ checkStrictly: true }"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="快递站点" prop="stationId">
              <el-select v-model="searchForm.stationId" clearable placeholder="请选择快递站点"
                         @keyup.enter.native="handleFilter">
                <el-option
                  v-for="item in stationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  clearable>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="是否分配" prop="isWorker">
              <el-select v-model="searchForm.isWorker" clearable placeholder="请选择是否分配配送员"
                         @keyup.enter.native="handleFilter">
                <el-option
                    v-for="item in isWorkerList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    clearable>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="配送员" prop="workerId">
              <el-select v-model="searchForm.workerId" clearable placeholder="请选择配送员"
                         @keyup.enter.native="handleFilter">
                <el-option
                    v-for="item in workerList"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id"
                    clearable>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="用户" prop="workerId">
              <el-select v-model="searchForm.memberId" clearable placeholder="请选择用户"
                         @keyup.enter.native="handleFilter">
                <el-option
                    v-for="item in memberList"
                    :key="item.id"
                    :label="item.nickName"
                    :value="item.id"
                    clearable>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="代理商" prop="parentPath">
              <el-cascader
                  @keyup.enter.native="handleFilter"
                  placeholder="请选择代理商"
                  v-model="searchForm.parentPath"
                  :key="searchForm.parentPath"
                  :options="agentList"
                  :props="{ checkStrictly: true }"
                  clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="支付状态" prop="parentPath">
              <el-select v-model="searchForm.payStatus" placeholder="请输入支付状态" clearable>
                <el-option value="WAIT" label="待支付"/>
                <el-option value="PAY" label="已支付"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label-width="20px">
<!--              <el-button v-waves type="success" icon="el-icon-plus" @click="handleEdit()">新增-->
<!--              </el-button>-->
              <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
              </el-button>
              <el-button v-waves icon="el-icon-refresh" @click="handleReset">
                重置
              </el-button>
              <el-button v-waves type="danger" icon="el-icon-delete" @click="handleRemove()">
                批量删除
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <PageTable class="containtable" :query-method="page" :query-form="searchForm" ref="pageTable">
      <el-table-column label="用户昵称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.memberNickName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学校名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.schoolName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="楼栋名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="宿舍/门牌地址" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
        <el-table-column label="取件码" align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.stationName }}</span>
            </template>
        </el-table-column>
      <el-table-column label="取件码" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.expressCodes }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户备注" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.memberRemark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平台备注" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.platformRemark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总金额" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.totalAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payStatusName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责代理商名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.agentName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责代理商电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.agentMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责配送人员名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.workerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责配送人员电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.workerMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <el-row>
            <el-col>
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
              </el-button>
            </el-col>
            <el-col>
              <el-button type="danger" size="mini" icon="el-icon-remove" @click="handleRemove(scope.row.id)">
                删除
              </el-button>
            </el-col>
            <el-col>
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handlerWorker(scope.row)">
                分配
              </el-button>
            </el-col>
            <el-col>
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handPush(scope.row)">
                快递规格
              </el-button>
            </el-col>
              <el-col>
                  <el-button type="primary" size="mini" icon="el-icon-edit" @click="handPushLog(scope.row)">
                      订单日志
                  </el-button>
              </el-col>
          </el-row>

        </template>
      </el-table-column>
    </PageTable>
    <!--分页-->

    <!--新增-->
    <el-dialog title="编辑" :visible.sync="editFormShow" :center="true" width="880px" :close-on-click-modal="false">
      <el-form status-icon :rules="rules" :model="editForm" ref="editForm" label-width="120px">
        <el-row>

          <el-col :sm="12">
            <el-form-item label="用户:" prop="memberId">
              <el-select v-model="editForm.memberId" clearable placeholder="请选择用户">
                <el-option
                    v-for="item in memberList"
                    :key="item.id"
                    :label="item.nickName"
                    :value="item.id"
                    clearable>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="收货人姓名:" prop="name">
              <el-input type="text" v-model.trim="editForm.name" placeholder="请输入收货人姓名"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="收货人电话:" prop="mobile">
              <el-input type="text" v-model.trim="editForm.mobile" :maxlength="11" placeholder="请输入收货人电话"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="地区:" prop="areaPath">
              <el-cascader
                  placeholder="请选择学校/楼栋"
                  clearable
                  v-model="editForm.areaPath"
                  :key="editForm.areaPath"
                  :options="schoolList"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="宿舍/门牌地址:" prop="address">
              <el-input type="text" v-model.trim="editForm.address" placeholder="请输入宿舍/门牌地址"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="取件码:" prop="expressCodes">
              <el-input type="text" v-model.trim="editForm.expressCodes" placeholder="请输入取件码"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="用户备注:" prop="memberRemark">
              <el-input type="text" v-model.trim="editForm.memberRemark" placeholder="请输入用户备注"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="平台备注:" prop="platformRemark">
              <el-input type="text" v-model.trim="editForm.platformRemark" placeholder="请输入平台备注"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="总金额:" prop="totalAmount">
              <el-input-number :min="0.00" step="1" precision="2" v-model.trim="editForm.totalAmount"
                               placeholder="请输入总金额"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="支付金额:" prop="payAmount">
              <el-input-number :min="0.00" step="1" precision="2" v-model.trim="editForm.payAmount"
                               placeholder="请输入支付金额"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="支付状态:" prop="payStatus">
              <el-select v-model="editForm.payStatus" placeholder="请输入支付状态">
                <el-option value="WAIT" label="待支付"/>
                <el-option value="PAY" label="已支付"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="负责代理商:" prop="parentPath">
              <el-cascader
                  placeholder="请选择代理商"
                  v-model="editForm.parentPath"
                  :key="editForm.parentPath"
                  :options="agentList"
                  :props="{ checkStrictly: true }"
                  clearable
                  @change="getChooseWorkerList"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="快递站点:" prop="stationId">
              <el-select v-model="editForm.stationId" clearable placeholder="请选择快递站点">
                <el-option
                  v-for="item in stationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  clearable>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="负责配送人员:" prop="workerId">
              <el-select v-model="editForm.workerId" clearable placeholder="请选择负责配送人员">
                <el-option
                    v-for="item in chooseWorkerList"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" v-waves @click="onSubmit('editForm')" icon="el-icon-success" v-loading="loading">
          提交
        </el-button>
        <el-button v-waves @click="onCancel" icon="el-icon-error">取消</el-button>
      </div>
    </el-dialog>
    <!--新增-->

    <!--新增-->
    <el-dialog title="选择分配员工" :visible.sync="editWorker" :center="true" width="880px"
               :close-on-click-modal="false">
      <el-form status-icon :rules="editWorkerRules" :model="editWorkerForm" ref="editForm" label-width="120px">
        <el-row>

          <el-col :sm="12">
            <el-form-item label="负责配送人员:" prop="workerId">
              <el-select v-model="editWorkerForm.workerId" clearable placeholder="请选择负责配送人员">
                <el-option
                    v-for="item in chooseWorkerList"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" v-waves @click="updateWorkerId" icon="el-icon-success" v-loading="loading">
          提交
        </el-button>
        <el-button v-waves @click="onCancel" icon="el-icon-error">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import waves from '@/directive/waves'
import PageTable from "@/components/Pagination/PageTable";
import {page, detail, edit, remove, workerList, schoolList, editWorker, stationList} from '@/api/admin/xyps/order'
import {agentList} from "@/api/admin/xyps/agent";
import {list} from "@/api/admin/member/info";

export default {
  name: 'xypsXypsOrder',
  components: {
    PageTable
  },
  directives: {
    waves
  },
  data() {
    return {
      page,
      loading: false,
      editWorker: false,
      isWorkerList: [
        {value: 1, label: "已分配"},
        {value: 0, label: "未分配"}
      ],
      searchForm: {
        isWorker: '',
        workerId: '',
        parentPath: '',
        buildingId: '',
        areaPath: "",
        parentId: "",
        areaId: "",
        memberId: "",
        stationId: "",
        payStatus: null,
      },
      editWorkerForm: {
        id: "",
        workerId: ""
      },
      agentList: [],
      memberList: [],
      workerList: [],
      chooseWorkerList: [],
      schoolList: [],
      editWorkerRules: {
        workerId: [
          {required: true, message: '请输入负责配送人员id', trigger: 'blur'}
        ],
      },
      rules: {
        memberId: [
          {required: true, message: '请输入用户id', trigger: 'blur'}
        ],
        memberNickName: [
          {required: true, message: '请输入用户昵称', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入收货人姓名', trigger: 'blur'}
        ],
        mobile: [
          {required: true, message: '请输入收货人电话', trigger: 'blur'}
        ],
        areaPath: [
          {required: true, message: '请选择区域', trigger: 'blur'}
        ],
        schoolId: [
          {required: true, message: '请输入学校id', trigger: 'blur'}
        ],
        schoolName: [
          {required: true, message: '请输入学校名称', trigger: 'blur'}
        ],
        buildingId: [
          {required: true, message: '请输入楼栋id', trigger: 'blur'}
        ],
        buildingName: [
          {required: true, message: '请输入楼栋名称', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入宿舍/门牌地址', trigger: 'blur'}
        ],
        expressCodes: [
          {required: true, message: '请输入取件码', trigger: 'blur'}
        ],
        /* memberRemark: [
           {required: true, message: '请输入用户备注', trigger: 'blur'}
         ],
         platformRemark: [
           {required: true, message: '请输入平台备注', trigger: 'blur'}
         ],*/
        totalAmount: [
          {required: true, message: '请输入总金额', trigger: 'blur'}
        ],
        payAmount: [
          {required: true, message: '请输入支付金额', trigger: 'blur'}
        ],
        payStatus: [
          {required: true, message: '请输入支付状态', trigger: 'blur'}
        ],
        parentPath: [
          {required: true, message: '请输入负责代理商', trigger: 'blur'}
        ],
        agentId: [
          {required: true, message: '请输入负责代理商id', trigger: 'blur'}
        ],
        agentName: [
          {required: true, message: '请输入负责代理商名称', trigger: 'blur'}
        ],
        agentMobile: [
          {required: true, message: '请输入负责代理商电话', trigger: 'blur'}
        ],
        // workerId: [
        //   {required: true, message: '请输入负责配送人员id', trigger: 'blur'}
        // ],
        workerName: [
          {required: true, message: '请输入负责配送人员名称', trigger: 'blur'}
        ],
        workerMobile: [
          {required: true, message: '请输入负责配送人员电话', trigger: 'blur'}
        ],
      },
      stationList: [],
      editFormShow: false,
      editForm: {
        id: '',
        memberId: '',
        memberNickName: '',
        name: '',
        mobile: '',
        areaId: "",
        areaPath: "",
        schoolId: '',
        schoolName: '',
        buildingId: '',
        buildingName: '',
        address: '',
        expressCodes: '',
        memberRemark: '',
        platformRemark: '',
        totalAmount: '',
        payAmount: '',
        payStatus: null,
        parentPath: "",
        agentId: '',
        agentName: '',
        agentMobile: '',
        workerId: '',
        workerName: '',
        workerMobile: '',
        stationId: '',
          parentId: '',
      },
    }
  },
  methods: {
    //查询所有快递站点信息
    getStationList(){
      stationList().then(result => {
        this.stationList = result.data.stationList;
      })
    },
    //查询所有学校信息
    getSchoolList() {
      schoolList().then(result => {
        this.schoolList = result.data.areaList
      })
    },
    //查询所有配送员信息
    getWorkerList() {
      workerList().then(result => {
        this.workerList = result.data.workerList;
      })
    },
    //查询当前可选配送员的信息
    getChooseWorkerList() {
      if (this.editForm.parentPath !== null && this.editForm.parentPath !== '') {

        this.editForm.parentId = this.editForm.parentPath.pop();
        this.editForm.parentPath.push(this.editForm.parentId);
      } else {
        this.editForm.parentPath = null;
        this.editForm.parentId = null;
      }
      workerList({agentId: this.editForm.parentId}).then(result => {
        this.chooseWorkerList = result.data.workerList;
      })
    },
    //查询代理商信息
    getAgentList(isParentId) {
      agentList({isParentId: isParentId}).then(res => {
        this.agentList = res.data.agentList
      })
    },
    getMemberList() {
      list().then(res => {
        this.memberList = res.data.memberList;
      })
    },
    handleFilter() {
      console.log(this.searchForm)
      if (this.searchForm.parentPath !== null && this.searchForm.parentPath !== '') {
        this.searchForm.parentId = this.searchForm.parentPath.pop()
        this.searchForm.parentPath.push(this.searchForm.parentId)
      } else {
        this.searchForm.parentPath = null;
        this.searchForm.parentId = null;
      }

      if (this.searchForm.areaPath !== null && this.searchForm.areaPath !== '') {
        this.searchForm.areaId = this.searchForm.areaPath.pop()
        this.searchForm.areaPath.push(this.searchForm.areaId)
      } else {
        this.searchForm.areaPath = null;
        this.searchForm.areaId = null;
      }
      this.$refs.pageTable.reset();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.$refs.pageTable.reset();
    },
    handleEdit(row) {
      this.loading = false;
      this.editFormShow = true;
      this.editForm.id = "";
      this.editForm.parentId = '';
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate();
        this.$refs.editForm.resetFields();
      });
      if (!row) {
        return;
      }
      detail({id: row.id}).then(res => {
        this.editForm.id = row.id;
        Object.entries(res.data.order).forEach(([key, val]) => {
          if (this.editForm[key] !== undefined) {
            this.editForm[key] = val;
          }
        });
        this.getChooseWorkerList();
      });

    },
    handlerWorker(row) {
      this.loading = false;
      this.editWorker = true;
      this.editWorkerForm.id = row.id;
      this.editWorkerForm.workerId = row.workerId;
      detail({id: row.id}).then(res => {
        this.editForm.id = row.id;
        Object.entries(res.data.order).forEach(([key, val]) => {
          if (this.editForm[key] !== undefined) {
            this.editForm[key] = val;
          }
        });
        this.getChooseWorkerList();
      });
      //this.editWorkerForm.parentPath = row.parentPath;
    },
    handPush(row){
      this.$router.push({path : "/xyps/order-express", query:{orderId : row.id}})
    },
      handPushLog(row){
          this.$router.push({path : "/xyps/order-log", query:{orderId : row.id}})
      },
    updateWorkerId() {
      editWorker(this.editWorkerForm).then(() => {
        this.$notify({
          title: '提示',
          message: '提交成功',
          type: 'success'
        });
        this.editWorkerForm.id = "";
        this.editWorkerForm.workerId = "";
        this.editWorker = false;
        this.$refs.pageTable.refresh();
      }).finally(() => {
        this.loading = false;
      })
    },
    //提交表单
    onSubmit(editForm) {
      if (this.loading) {
        return
      }
      this.loading = true;
      this.$refs[editForm].validate((valid) => {
        if (!valid) {
          this.loading = false;
          return false;
        }
        if (this.editForm.parentPath !== null && this.editForm.parentPath !== '') {
          this.editForm.parentId = this.editForm.parentPath.pop()
          this.editForm.parentPath.push(this.editForm.parentId)
        } else {
          this.editForm.parentPath = null;
          this.editForm.parentId = null;
        }

        if (this.editForm.areaPath !== null && this.editForm.areaPath !== '') {
          this.editForm.areaId = this.editForm.areaPath.pop()
          this.editForm.areaPath.push(this.editForm.areaId)
        } else {
          this.editForm.areaPath = null;
          this.editForm.areaId = null;
        }
        edit(this.editForm).then(() => {
          this.$notify({
            title: '提示',
            message: '提交成功',
            type: 'success'
          });
          this.$refs.pageTable.refresh();
          this.editFormShow = false;
        }).finally(() => {
          this.loading = false;
        })
      })
    },
    //删除用户
    handleRemove(id) {
      if (!id) {
        id = this.$refs.pageTable.selects.map(item => item.id).join(',')
      }
      if (!id) {
        this.$message({
          type: 'error',
          message: '请选择要操作的记录!'
        });
        return;
      }
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ids: id}).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$refs.pageTable.refresh();
        })
      });
    },
    // 取消提交
    onCancel: function () {
      this.editFormShow = false;
      this.editWorker = false;
    }
  },
  created() {
    this.getWorkerList();
    this.getAgentList();
    this.getSchoolList();
    this.getStationList();
  },
  mounted() {
    this.getMemberList();
    this.$refs.pageTable.refresh();
  }
}
</script>

<style scoped>

</style>

